<template>
  <!-- 卡片列表 -->
  <div class="card-list">
    <div v-for="(item, index) in companyMap" :key="item.companyInfo.cid" class="card">
      <div class="card_image">
        <canvas
          :ref="(el) => getDivDom(el, item)"
          :style="{ background: ColorMap[index % 4] }"
        ></canvas>
      </div>
      <div class="card__content ft-12px pl-20px">
        <div class="cardContent_l">
          <el-space direction="vertical" alignment="start" :size="10" class="w-100%">
            <div class="flex items-center" @mouseleave="setShow(index, false)">
              <span
                @click="showItem(item, index, false)"
                class="company-name mr-10px text-16px"
                size="large"
                @mouseover="setShow(index, true)"
                >{{ item.companyInfo.companyName }}</span
              >
              <span
                class="cloneTxt"
                v-if="item.isShow"
                @click="copyText(item.companyInfo.companyName)"
                >复制</span
              >
            </div>
            <flexbox justify="flex-start">
              <p>
                <el-tag size="small" type="danger" class="mr-10px">
                  <i class="el-icon-user"></i>
                  {{ item.companyInfo.numberCount || 0 }}个联系方式
                </el-tag>
                <el-tag
                  class="mr-10px"
                  :type="dangerState.includes(item.companyInfo.openStatus) ? 'danger' : ''"
                  style="font-weight: normal"
                  size="small"
                  >{{ item.companyInfo.openStatus }}
                </el-tag>
                <el-tag v-if="item.companyInfo.entType" type="success">
                  {{ item.companyInfo.entType }}
                </el-tag>
              </p>
            </flexbox>
          </el-space>
          <flexbox justify="flex-start" class="mb-10px">
            <p style="flex: 0 0 20%">
              <el-text class="mx-1" size="small" type="info">企业法人：</el-text>
              <span>{{ item.companyInfo.legalPerson }}</span>
            </p>
            <p style="flex: 0 0 30%">
              <el-text class="mx-1" size="small" type="info">成立日期：</el-text>
              <span>{{ item.companyInfo.startDate }}</span>
            </p>
            <p style="flex: 0 0 50%">
              <el-text class="mx-1" size="small" type="info">注册资本：</el-text>
              <span>{{ item.companyInfo.regCapital || '0 万元' }}</span>
            </p>
          </flexbox>
          <flexbox justify="flex-start" class="ft-12px mb-10px">
            <p style="flex: 0 0 20%">
              <el-text class="mx-1" type="info" size="small">企业网址：</el-text>
              <el-link type="primary" @click="openUrl(item.companyInfo.url)">{{
                item.companyInfo.url
              }}</el-link>
            </p>
            <p style="flex: 0 0 30%">
              <el-text class="mx-1" type="info" size="small">国标行业：</el-text>
              <span>{{ item.companyInfo.industry }}</span>
            </p>
            <p style="flex: 0 0 50%">
              <el-text class="mx-1" type="info" size="small">经营地址：</el-text>
              {{ item.companyInfo.regAddr }}
            </p>
          </flexbox>
          <p>
            <span
              class="cardTag"
              v-for="(init, idx) in item.menuList"
              :key="init.id"
              @click="showItem(item, index, true, idx)"
            >
              {{
                init.field == 'baseInfo' && init.totalCount == 0
                  ? '基本信息(1)'
                  : init.name + '(' + init.totalCount + ')'
              }}
            </span>
          </p>
        </div>
        <div class="cardContent_r">
          <div v-if="!item.companyInfo.received">
            <el-button
              size="small"
              type="primary"
              style="padding: 5px 15px"
              @click="unlock([item.companyInfo.cid])"
            >
              领取企业
            </el-button>
            <div class="w-full text-center">
              <p
                >联系方式<span
                  ><el-text class="mx-1" type="primary">{{
                    item.companyInfo.numberCount || 0
                  }}</el-text></span
                >条</p
              >
            </div>
          </div>

          <el-text v-else class="mr-10px" type="primary"
            >{{ item.companyInfo.receiveUser }}已领取</el-text
          >
        </div>
      </div>
    </div>
    <el-empty v-if="!list.length" style="flex: 1" description="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import { companyReceive } from '@/api/ent/advanceSearch/index'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshVal', 'showItem'])
const props = defineProps({
  list: Array
})
const divDomList = ref(new Map())
const dangerState = ref(['吊销', '注销', '停业', '清算'])

const companyMap = ref([])

const ColorMap = ref([
  'rgb(132, 202, 176)',
  'rgb(188, 158, 221)',
  'rgb(125, 179, 217)',
  'rgb(140, 163, 205)'
])
// 领取
const unlock = async (ids) => {
  const result = await companyReceive({ ids })
  if (result) {
    ElMessage.success('领取成功!')
    emit('refreshVal')
  } else {
  }
}
// 默认显示
const showItem = (item, index, value, idx) => {
  sessionStorage.setItem('companyIndex', index)
  emit('showItem', item, value, idx)
}
// canvas
const getDivDom = (el, item) => {
  if (el) {
    divDomList.value.set(item.companyInfo.cid, el)
  }
}
// 复制文本
const copyText = (txt) => {
  navigator.clipboard
    .writeText(txt)
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch((err) => {
      ElMessage.error('无法复制文本: ', err)
    })
}
const setShow = (index, val) => {
  companyMap.value[index].isShow = val
}
onMounted(() => {
  let area = ['省', '市', '县', '区']
  watchEffect((val) => {
    let result = JSON.parse(JSON.stringify(props.list))
    result.map((item) => {
      item.isShow = false
    })
    companyMap.value = result
    props.list?.forEach((item) => {
      const canvas = divDomList.value.get(item.companyInfo.cid)
      if (canvas) {
        canvas.width = canvas.width
        const indexName = item.companyInfo.companyName[2]
        let companyName
        let positLeft = 6
        if (item.companyInfo.companyName.length < 6) {
          companyName = item.companyInfo.companyName.slice(0, 4)
          if (item.companyInfo.companyName.length == 2) positLeft = 80
          if (item.companyInfo.companyName.length == 3) positLeft = 42
        } else {
          if (area.indexOf(indexName) <= -1) {
            companyName = item.companyInfo.companyName.slice(2, 6)
          } else {
            companyName = item.companyInfo.companyName.slice(3, 7)
          }
        }
        const ctx = canvas.getContext('2d')
        ctx.scale(1, 0.5)
        ctx.font = '72px sans-serif'
        ctx.fillStyle = '#fff'
        ctx.fillText(companyName, positLeft, 180)
      }
    })
  })
})

const openUrl = (url) => {
  window.open('https://' + url)
}
</script>

<style scoped lang="scss">
p {
  margin: 0;
  padding: 0;
}
h2 {
  margin: 0;
  padding: 0;
}
.card-list {
  display: flex;
  flex-wrap: wrap;
}
.cardTag {
  margin-right: 20px;
  text-decoration: underline;
  cursor: pointer;
}
.cardTag:hover {
  color: #666;
}
.card {
  $text-fontSize: 12px;
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  width: 100%;
  overflow: auto;
  border-bottom: 1px solid #eff3f6;

  &:hover {
    box-shadow: 0px 0px 10px 2px #99999930;
  }
  &:nth-child(3n + 1) {
    margin-left: 0;
  }

  .card_image {
    position: relative;
    canvas {
      border: 1px solid #eff3f6;
      // background: #e1ebf350;
      width: 64px;
      height: 64px;
      border-radius: 8px;
    }
  }

  .card__content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .cardContent_l {
      width: calc(100% - 200px);
      font-size: 12px;
    }
    .cardContent_r {
      display: flex;
      align-items: right;
      justify-content: center;
      flex-direction: column;
      font-size: 12px;
      .el-button {
        font-size: $text-fontSize;
      }
      p {
        margin-top: 5px;
      }
    }
    h2 {
      margin-bottom: 10px;
    }
    .card__content-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 400;
      .company_name {
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        margin-right: 8px;
      }
    }

    p {
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
}
.company-name:hover,
.cardTag:hover {
  background: #99999940;
  cursor: pointer;
  color: var(--el-color-primary);
}
.cloneTxt:hover {
  background: #99999940;
  cursor: pointer;
  color: var(--el-color-primary);
}
</style>
